<script setup>
import {onMounted} from 'vue'

defineOptions({
  name: 'SaveButton'
})

const props = defineProps({
  loading: Boolean,
  saveText: {
    type: String,
    default: '保存'
  },
  title: {
    type: String,
    default: '同时按下 Ctrl + Enter 可实现快捷提交'
  },
  size: {
    type: String,
    default: 'large',
    validator: size => ['small', 'medium', 'large'].includes(size)
  }
})
const emit = defineEmits(['on-save'])
onMounted(() => {
})

</script>
<template>
  <ElButton type="primary" :size="size" @click="emit('on-save')" :title="title"
            :disabled="props.loading">
    <template v-if="props.loading">
      <ElIcon class="is-loading">
        <Loading/>
      </ElIcon>
      {{ props.saveText }}中
    </template>
    <template v-else>
      <span>{{ props.saveText }}</span>
    </template>
  </ElButton>
</template>

